<template>
  <view style="height: 100%">
    <!-- 遮罩层 -->
    <view class="mask pay-actionsheet-mask" :class="[show ? 'pay-mask-show' : '']"></view>
    <!-- 组件内容 -->
    <view class="bg-light fixed-bottom pay-actionsheet" :class="[show ? 'pay-actionsheet-show' : '']">
      <view class="h2 text-muted" style="position: absolute; top: 0; right: 20rpx" @tap="handleClose()">×</view>
      <view class="font-weight-bold text-center pt-5">
        <text class="font-lg">￥</text><text class="h2">{{ amount }}</text>
      </view>

      <view class="text-center pb-5">
        <text class="font">待支付</text>
      </view>
      <view class="text-center py-5">
        <text class="font-lg font-weight-bold">请选择支付方式</text>
      </view>
      <!-- 支付方式 -->
      <radio-group class="pt-3" @change="select">
        <label v-for="(item, index) in way" :key="index" style="position: relative" class="mx-4 mt-2 bg-white p-3 flex align-center rounded-lg">
          <image :src="Domain_ICON + item.icon" class="rounded" style="width: 35rpx; height: 35rpx" mode=""></image>
          <text class="font-md ml-2 font-weight-bold">{{ item.value }}</text>
          <radio :value="item.value" style="transform: scale(0.7); position: absolute; right: 20rpx" :checked="item.select"/>
        </label>
      </radio-group>
      <view class="px-4 py-2 fixed-bottom">
        <view class="bg-info rounded text-center py-3 text-white font-weight-bold font" @click="submit()" hover-class="bg-hover-info" :hover-stay-time="150">{{ payway }}￥{{ amount }}</view>
      </view>
    </view>
  </view>
</template>

<script>
const app = getApp();
import times from "@/mixins/time.js";
import { getArticleCheckStock, get_wj,setPurchaseOrder,PurchaseNative } from "@/api/merchant.js";
export default {
  data() {
    return {
      loading: false, //节流
      times: "",
      payway: "微信支付", //支付方式
      balance: "", //用户余额
      collection: {
        //收款表
        Collection_SerialNumber: "",
        Store_SerialNumber: "",
        procure_order_SerialNumber: "",
        Collection_Date: "",
        Collection_Amount: 0,
        Sales_Amount: 0,
        Change_Amount: 0,
        Order_Type: 1,
        App_ID: app.globalData.appid,
        Open_ID: app.globalData.openid,
        Enterprise_Info_SerialNumber: app.globalData.enterprise,
        Children: {
          collection_detail: [
            {
              Collection_Detail_SerialNumber: "",
              Collection_SerialNumber: "",
              procure_order_SerialNumber: "",
              Collection_Type: "微信支付",
              Collection_Related_Number: "",
              Amount: 0,
              Gift_Type: 0,
              Gift_Amount: 0,
            },
          ],
        },
      },
      Purchase_Order_Paystages_SerialNumber: "",
      Domain_ICON: app.globalData.Domain_ICON, //全局变量域名
    };
  },
  props: {
    show: {
      //显示支付方式
      type: Boolean,
      default: false,
    },
    amount: {
      //总计金额
      type: null,
      default: "",
    },
    procure_order: {
      //采购订单
      type: Object,
      default: function () {
        return {};
      },
    },
    way: {
      //支付方式
      type: Array,
      default: function () {
        return [
          {
            icon: '/WXlogo.png',
            value: "微信支付",
            select: true,
          },
        ];
      },
    },
  },
  methods: {
    handleClose() {
      //关闭
      this.$emit("Close");
    },
    //选中的支付方式
    select(e) {
      this.payway = e.detail.value;
    },
    submit() {
      //校验库存
      let that = this;
      if (!this.loading) {
        this.loading = true;
        uni.showLoading({
          title: "提交中...",
        });
        //校验库存
        this.getArticleCheckStockAction(()=>{
			this.defray();
		});
      }
    },
    async getArticleCheckStockAction(callback) {
      const res = await getArticleCheckStock({
        Wholesale_Unit_Price_SerialNumber:this.procure_order.Children.purchase_order_detail[0].Unit_Price_SerialNumber,
		Quantity: this.procure_order.Children.purchase_order_detail[0].Quantity,
      });
      if (res.Status == "success") {
		  callback();
      } else if (res.Status == "insufficient") {
        this.loading = false;
        uni.hideLoading();
        uni.showToast({
          title: "库存不足!",
          icon: "error",
        });
      } else {
        this.loading = false;
        uni.hideLoading();
        uni.showToast({
          title: "库存检查失败，请重试！",
          icon: "error",
        });
      }
    },
    async pay(data,callback) {
      const res = await get_wj({
        Primary_Key: data,
        Primary_Key_Name: "Purchase_Order_SerialNumber",
        Data: "purchase_order_paystages",
      });
      callback(res[0].Purchase_Order_Paystages_SerialNumber)
    },
	async WeChatPay(res,callback){
		callback(await PurchaseNative({
            Collection_Type: "微信支付移动",
            Purchase_Order_Paystages_SerialNumber: res, //明细主键
            Open_ID: app.globalData.openid,
        }))
	},
    async defray() {
      const that = this;
	  const res = await setPurchaseOrder({Data:JSON.stringify({purchase_order: [that.procure_order]})})
	  if(res.Status == 'success'){
		  this.pay(res.Data,(data)=>{
			  this.WeChatPay(data,(res)=>{
				  if (res.result_msg == "SUCCESS") {
					  let appId = res.sdk_appid;
					  let timeStamp = res.sdk_timestamp + "";
					  let nonceStr = res.sdk_noncestr;
					  let packageX = res.sdk_package;
					  let signType = res.sdk_signtype;
					  let paySign = res.sdk_paysign;
					  uni.requestPayment({
					    provider: "wxpay",
					    appId: appId,
					    timeStamp: timeStamp,
					    nonceStr: nonceStr,
					    package: packageX,
					    signType: signType,
					    paySign: paySign,
					    success: function (res) {
					      uni.showToast({
					        title: "支付成功！",
					        icon: "success",
					        success() {
					          uni.navigateTo({
					            url: `/pages/paycomplete/paycomplete?price=${that.amount}`,
					          });
					        },
					      });
					    },
					    fail: function (err) {
					      uni.showToast({
					        title: "已取消！",
					        icon: "error",
					      });
					    },
					    //调起支付后打开懒加载
					    complete: () => {
					      this.loading = false;
					      uni.hideLoading();
					    },
					  });
				  } else {
                    that.loading = false;
                    uni.hideLoading();
                    uni.showToast({
                      title: "拉起支付失败，请重试！",
                      icon: "error",
                    });
                  }
			  })
		  })
	  }
    },
    accMul(arg1, arg2) {
      //浮点型相乘
      let m = 0,
        s1 = arg1.toString(),
        s2 = arg2.toString();
      try {
        m += s1.split(".")[1].length;
      } catch (e) {}
      try {
        m += s2.split(".")[1].length;
      } catch (e) {}
      return (
        (Number(s1.replace(".", "")) * Number(s2.replace(".", ""))) /
        Math.pow(10, m)
      );
    },
    accAdd(arg1, arg2) {
      //浮点型相加
      var r1, r2, m;
      try {
        r1 = arg1.toString().split(".")[1].length;
      } catch (e) {
        r1 = 0;
      }
      try {
        r2 = arg2.toString().split(".")[1].length;
      } catch (e) {
        r2 = 0;
      }
      m = Math.pow(10, Math.max(r1, r2));
      return (arg1 * m + arg2 * m) / m;
    },
  },
};
</script>

<style lang="scss">
.pay-actionsheet {
  width: 100%;
  height: 100%;
  visibility: hidden;
  transform: translate3d(0, 100%, 0);
  transform-origin: center;
  transition: all 0.3s ease-in-out;
}

.pay-actionsheet-show {
  transform: translate3d(0, 0, 0);
  visibility: visible;
}

.pay-actionsheet-mask {
  background: rgba(0, 0, 0, 0.6);
  transition: all 0.3s ease-in-out;
  opacity: 0;
  visibility: hidden;
}

.pay-mask-show {
  opacity: 1;
  visibility: visible;
}
</style>